<div class=content>
	<h2>读书进度条</h2>
	<p>见缝插针，阅读经典书籍。</p>

	<h3>C语言</h3>
	<!--读书 进度条 -->
	<form id="form1">
		<!-- 
		<label for="bar">C++ primer(5th)</label>
		<progress value="10" max="100"> </progress>
		-->
	</form>





	<h2>项目进度条</h2>
	<p>清醒时间，全力做项目。</p>
	<h3>scPolyA-seq2</h3>
	<!--项目 进度条 -->
	<form id="form2"></form>







</div>

<style>
form div{ 
	/*border: 1px dashed #ccc; 
	background: linear-gradient(0deg,#f4f7fc 2.26%,rgba(244,247,252,0));
	*/
	background: rgba(244,247,252,0);
	border: 1px solid #e2e4e9;
	border-radius: 4px;
	box-sizing: border-box;

	margin:10px 0; padding:3px 5px;
}
form progress{width:100%; height:20px; color:red;}
form label{margin-right:5px;}

form progress::-moz-progress-bar { background: #F064B4; }/*表示在Firefox下已完成进度的颜色*/
form progress::-webkit-progress-bar { background: #e6e6e6; }/*表示在chrome下全部进度的颜色*/
form progress::-webkit-progress-value { background: #0064B4; }/*表示在chrome下已完成进度的颜色*/
</style>

<script>
// 工具函数
function newBar(taskName,cur, total, obj){
	//1
	var oLabel=document.createElement("label");
	oLabel.innerHTML=taskName;
	//2
	var oPs=document.createElement("progress");
	oPs.setAttribute("max", 100);
	//oPs.setAttribute("class", "bar");
	var val=cur/total * 100 //修改这里即可，阅读页数
	oPs.setAttribute("value", val);
	var title=taskName + " 进度: "+Math.round(val*100)/100+"%" + " ["+cur+"/"+total+"]";
	oPs.setAttribute("title", title);
	//
	var oDiv=document.createElement("div");
	oDiv.append(oLabel);
	oDiv.append(oPs);
	
	// add to dom
	var oForm=obj ||document.getElementById("form1");
	oForm.append(oDiv);
}

// 设置进度，一行一个进度条
function update(){
	var form1=document.getElementById("form1")
	newBar("C++ primer(5th)", 377, 864, form1); //
	newBar("csapp", 166,775, form1);  //linux/
	
	var form2=document.getElementById("form2")
	newBar("xx项目", 710, 864, form2);
}


window.addEventListener("load", update, false)
</script>